<template>
  <div class="w-full" style="
      height: var(--ep-menu-item-height);
      background-color: var(--ep-color-primary);
      display: flex;
      justify-content: space-between;
    ">
    <div class="x-logo w-400px"></div>
    <el-menu class="w-120px" style="background-color: transparent" mode="horizontal" :ellipsis="false">
      <el-menu-item h="full" @click="toggleDark()">
        <button class="border-none bg-transparent cursor-pointer" style="height: var(--ep-menu-item-height)">
          <i inline-flex i="dark:ep-moon ep-sunny" />
        </button>
      </el-menu-item>
      <button class="border-none bg-transparent cursor-pointer" style="height: var(--ep-menu-item-height)"
        @click="methods.logout">
        <i inline-flex i="ep-switch-button" />
      </button>
    </el-menu>
  </div>
</template>

<script lang="ts" setup>
import { toggleDark } from '~/composables'
import { userStore } from '~/store'
import router from '~/router'
const methods = {
  async logout() {
    const userState = userStore()
    await userState.logout(true)
    router.push({ path: '/login' })
  }
}
</script>

<style lang="scss" scoped>
.x-logo {
  display: block;
  background-image: url(~/assets/logo.png);
  background-repeat: no-repeat;
  background-size: 190px;
  background-position: 5px 5px;
}

i {
  color: white;
}
</style>
